{include file="account/common/head"}
<style>
    .follow-list li {
        padding: 10px 0;
    }

    .follow-list li:not(:last-child) {
        border-bottom: 1px solid #eee;
    }

    .user-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .user-info .avator {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 5px 10px 0;
    }

    .user-navbar .user-info .avator,
    .user-info p {
        float: left;
    }

    .user-info p {
        margin-top: 10px;
    }
</style>
<script>
    document.title = "我的关注 | {:config('system.base.title')} "
</script>
<div class="layout clearfix">
    <span class="layui-breadcrumb">
        <a href="{:url('/index/index/index')}">首页</a>
        <a><cite>我的关注</cite></a>
    </span>
    <div class="navbar">
        <div class="data layui-tab">
            <ul class="layui-tab-title">
                <li class=""><a href="{:url('/index/account/article')}">主题</a></li>
                <li class=""><a href="{:url('/index/account/comment')}">评论</a></li>
                <li class=""><a href="{:url('/index/account/collect')}">收藏</a></li>
                <li class="layui-this"><a href="{:url('/index/account/follow')}">关注</a></li>
            </ul>

            <ul class="follow-list">
                {if count($list) == 0 }
                <p class="no-data">什么也没有~</p>
                {/if}
                {volist name="list" id="follow"}
                <li>
                    <div class="user-navbar">
                        <div class="user-info layui-clear">
                            <img src="{$follow.userInfo.head_icon}" alt="{$follow.userInfo.nickname}" class="avator">
                            <p class="layui-font "><a class="layui-font-blue"
                                    href="{:url('/index/profile/index' , ['uid' => $follow.follow_user_id])}">{$follow.userInfo.nickname}</a>
                                <!-- <br>
                                <span class="layui-badge layui-bg-blue ">超级会员</span> -->
                            </p>
                        </div>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                            onclick="follow(this , '{$follow.follow_user_id}')">已关注</button>
                    </div>
                </li>
                {/volist}
            </ul>
            <div class="paginate">
                {/*$page|raw*/}

            </div>

        </div>
    </div>
</div>
{include file="common/bottom"}
<script>
    layui.use(function () {
        var layer = layui.layer
        $ = layui.$

    })
    function follow(th, id) {
        let url = ""
        let uid = id
            var str = $(th)[0].innerText
            let tip = str == '已关注' ? '确定要取消关注 Ta 吗' : '关注 Ta'
            layer.confirm(tip, () => {
                $.get('/index/profile/doFollow', { uid: uid }, (res) => {
                    if (res.code == 200) {
                        layer.msg(res.message, { icon: 6 })
                        // $($(th).parents()[1]).remove()
                        if (str.trim() == '+ 关注') {
                            $(th)[0].innerHTML = `已关注`
                            $(th).removeClass('layui-bg-blue')
                        } else {
                            $(th)[0].innerHTML = `+ 关注`
                            $(th).addClass('layui-bg-blue')
                        }
                        $(th).toggleClass('layui-btn-primary')
                    } else {
                        layer.msg(res.message, { icon: 5 })
                    }
                }
                    , 'json')
            })
    }
</script>